import React, { memo, useState, useEffect } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import { PlaylistLeftWrap } from "./style";
import { getSizeImage } from "@/utils/format-utils";
import Comment from "@/components/aboutComment/comment";
import { getPlaylistComment } from "../store/actionTypes";
import Pagination from "@/components/pagination";
import Five from "@/components/button/five";
import SongTable from "@/components/songTable";
import ListTitle from "@/components/listTitle";
import TableIntroduce from "@/components/tableIntroduce";
import Tag from "@/components/tag";
import Intro from "@/components/intro";

export default memo(function PlaylistLeft(props) {
  const [pageNum, setPageNum] = useState(1);

  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getPlaylistComment(props.playlistId, 20, (pageNum - 1) * 20));
  }, [dispatch, pageNum]); // eslint-disable-line react-hooks/exhaustive-deps

  const state = useSelector(
    (state) => ({
      playlistRecomments: state.getIn(["playlist", "playlistComments"]),
    }),
    shallowEqual
  );

  const changePage = (page, pageSize) => {
    setPageNum(page);
  };
  // (props.playlistData.playlist)

  return (
    <PlaylistLeftWrap>
      {props.playlistData.code == 200 ? (
        <div className="playlist-top-box">
          <div className="playlist-l">
            <img
              src={getSizeImage(props.playlistData.playlist.coverImgUrl, 200)}
              alt=""
            />
            <span className="msk-p coverall"></span>
          </div>
          <div className="playlist-top-r">
            <ListTitle
              pageName={"playlist"}
              playlistData={props.playlistData}
            />
            <TableIntroduce
              pageName={"playlist"}
              imgUrl={props.playlistData.playlist.creator.avatarUrl}
              userId={props.playlistData.playlist.creator.userId}
              nickName={props.playlistData.playlist.creator.nickname}
              createTime={props.playlistData.playlist.createTime}
              imageIcon={props.playlistData.playlist.creator.avatarDetail}
            />
            <Five
              subscribedCount={props.playlistData.playlist.subscribedCount}
              shareCount={props.playlistData.playlist.shareCount}
              commentNumber={props.playlistData.playlist.commentCount}
            />
            <Tag playlistData={props.playlistData} />
            <Intro playlistData={props.playlistData} />
          </div>
        </div>
      ) : (
        ""
      )}
      <SongTable playlistData={props.playlistData} />
      <div className="more-content">
        <div>更多内容，请下载客户端</div>
        <a>立即下载</a>
      </div>
      <Comment pageNum={pageNum} comments={state.playlistRecomments} />
      <Pagination
        page={pageNum}
        size={20}
        getPage={changePage}
        total={
          state.playlistRecomments.length !== 0
            ? state.playlistRecomments.total
            : ""
        }
      />
    </PlaylistLeftWrap>
  );
});
